<template>
    <div class="bord-img" id="bordImg">
        <div class="share-bord-warp" :class="{'center':defaultPageMsg.needCenter}">
            <div class="positionR">
                <img @click="$emit('clickFn')" class="bord-img-img width-full" v-if="defaultPageMsg.shareShowImg && !defaultPageMsg.isOnlyUseSolt" :src="staticImageUrl(defaultPageMsg.shareShowImg)" alt="">
                <img @click="$emit('clickFn')" class="close-img" v-if="defaultPageMsg.needCloseBtn" :src="staticImageUrl('images/close_icon_border.png')" alt="">
            </div>
        </div>
        <slot name="needInsert"></slot>
        <v-bord>
            <div slot="cantClick"  @click="$emit('clickFn')" class="com_black"></div>
        </v-bord>
    </div>
</template>
<!--使用方法<div slot="cantClick" @click="sureGetLocationFn" class="com_black"></div>-->
<script>
    export default {
        name: "bordImg",
        props:{
            bordImgMsg:{
                type:Object,
            }
        },
        data(){
            return{
                defaultPageMsg:{
                    shareShowImg:'images/booking.share02.png',
                    isOnlyUseSolt:false,
                    needCloseBtn:false,
                    needCenter:false
                }
            }
        },
        mounted(){
            this.defaultPageMsg = Object.assign(this.defaultPageMsg,this.bordImgMsg);
        },
        components:{
            'v-bord':()=>import('../alert/Bord'),
        },
    }
</script>

<style scoped lang="scss">
    .share-bord-warp{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1051;
    }
    .center{
        bottom: 0;
        right: 0;
        margin: auto;
        height: 1px;
        .bord-img-img{
            position: relative;
            left: 50%;
            right: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
    }
    .bord-img-img{

    }
    .close-img{
        width: .44rem;
        height: .44rem;
        left: 0;
        right: 0;
        bottom: -.8rem;
        position: absolute;
        margin: auto;
    }
</style>